<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Markdown 转 HTML</title>
    <!-- 引入 highlight.js 的 CSS 样式 -->
    <link rel="stylesheet" href="https://mirror.fe80.cn/highlight.js/11.9.0/styles/vs2015.min.css">
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div id="content"></div>

    <!-- 引入 marked.js 和 highlight.js -->
    <script src="https://mirror.fe80.cn/marked/15.0.7/marked.min.js"></script>
    <script src="https://mirror.fe80.cn/highlight.js/11.7.0/highlight.min.js"></script>
    <script>
        // 异步加载 content.md 文件
        fetch('content.md')
            .then(response => response.text())
            .then(markdown => {
                // 自定义 marked 渲染器
                const renderer = new marked.Renderer();

                // 自定义块引用渲染器
                renderer.blockquote = function(quote) {
                    console.log(quote);
                    const match = quote.text.match(/^\[(.*?)\]/);
                    if (match) {
                        return `<blockquote class="${match[1]}">${quote.text.replace(match[0], '').trim()}</blockquote>`;
                    }
                    return `<blockquote>${quote.text.trim()}</blockquote>`;
                };

                // 使用自定义渲染器解析 Markdown
                const html = marked.parse(markdown, { renderer: renderer });
                // 将解析后的 HTML 插入到页面中
                document.getElementById('content').innerHTML = html;
                // 应用代码高亮
                document.querySelectorAll('pre code').forEach(block => {
                    hljs.highlightElement(block);
                });
            })
            .catch(error => {
                console.error('加载 Markdown 文件时出错:', error);
            });
    </script>
</body>
</html>